<template>
		<u-picker :show="showFliterGrade" :columns="gradeColumns" @cancel="closePicker" closeOnClickOverlay="true"
			@confirm="selectGrade" @close="closePicker" keyName="gradeDesc">
		</u-picker>
</template>

<script>
	import {
		getGradeInSchool
	} from '@/utils/gradeInSchool.js'
	export default {
		props: {
			showPicker: Boolean,
			type:String
		},
		data() {
			return {
				showFliterGrade: false,
				gradeColumns: [getGradeInSchool(this.type)]
			}
		},
		watch:{
			showPicker(curr,prev){
				this.showFliterGrade = curr
			}
		},
		methods: {
			closePicker() {
				this.showFliterGrade = false
				this.$emit('on-close')
			},
			selectGrade(arr) {
				let grade = arr.value[0].grade
				let gradeDesc = arr.value[0].gradeDesc
				this.closePicker()
				this.$emit('confirm',grade,gradeDesc)
			}
		}
	}
</script>

<style>
</style>
